<div style="padding:24px;">
  <p class="page-title" (click)="goList()">
    <i class="anticon anticon-left-circle-o"></i> <span>编辑任务</span>
  </p>
  <form nz-form [formGroup]="validateForm">
    <div class="content bg-white">
      <div class="bx-form">
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>任务名称</label>
          </div>
          <div nz-form-control [nzValidateStatus]="getFormControl('task_name')" class="bx-form-item_content">
            <nz-input [nzType]="'text'" formControlName="task_name" [nzPlaceHolder]="'请输入任务名称'" [nzDisabled]="!canEdit"
                      [nzSize]="'large'"></nz-input>
            <div nz-form-explain
                 *ngIf="getFormControl('task_name').dirty&&getFormControl('task_name').hasError('required')">请输入任务名称!
            </div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>任务类型</label>
          </div>
          <nz-radio-group formControlName="type" class="bx-form-item_content ml-0">
            <label nz-radio [nzValue]="1" [nzDisabled]="true">
              <span>销售任务</span>
            </label>
            <label nz-radio [nzValue]="2" [nzDisabled]="true">
              <span>曝光任务</span>
            </label>
          </nz-radio-group>
        </div>

        <div nz-form-item nz-row *ngIf="keywordList.length > 0" class="keyword-tags">
          <div nz-form-label class="bx-form-item_label">
            <label>选择关键词</label>
          </div>
          <div *ngIf="canEdit" style="margin-left:100px;">
            <nz-tag (click)="checkTag(item)" style="margin-bottom: 5px;" [nzColor]="item.checked?'#108ee9':''" *ngFor="let item of keywordList">
              {{item.key}}
            </nz-tag>
          </div>
          <div *ngIf="!canEdit" style="margin-left:100px;">
            <nz-tag  style="margin-bottom: 5px;" [nzColor]="item.checked?'lightblue':''" *ngFor="let item of keywordList">
              {{item.key}}
            </nz-tag>
          </div>
        </div>

        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>分类类型</label>
          </div>
          <nz-input style="width:180px;" [nzType]="'text'" [nzSize]="'large'" [nzDisabled]="true"
                    formControlName="category_name"></nz-input>
        </div>

        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>所属活动类型</label>
          </div>
          <div nz-form-control>
            <div nz-col [nzSm]="10" [nzXs]="20">
              <nz-select
                style="width: 200px;"
                [nzPlaceHolder]="'请选择所属活动类型'"
                formControlName="activity_type"
                [nzDisabled]="true"
              >
                <nz-option
                  *ngFor="let option of activityTypeOptions"
                  [nzLabel]="option.label"
                  [nzValue]="option.value"
                  [nzDisabled]="option.disabled">
                </nz-option>
              </nz-select>
            </div>
          </div>
        </div>

        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>任务商品或活动</label>
          </div>
          <div class="bx-form-item_content" nz-form-control>
            <div class="goods-content">
              <div *ngIf="validateForm.value.task_content_type === 1">
                <div class="goods-content-info">
                  <div class="goods-content-photo"><img
                    src="{{checkedInfo.first_picture?aliyunOssOutputUrl+'/'+checkedInfo.first_picture:''}}"></div>
                  <div class="goods-content-name">{{checkedInfo.name}}</div>
                </div>
                <div class="goods-content-detail">
                  <div>
                    <div><span class="title">售价</span><span class="price">￥{{checkedInfo.price/1000}}</span></div>
                  </div>
                  <div>
                    <div><span class="title control-width">商品库存</span><span class="info">{{checkedInfo.in_stock}}</span>
                    </div>
                    <div><span class="title control-width">商品ID</span><span class="info">{{checkedInfo.id}}</span></div>
                  </div>
                  <div>
                  </div>
                </div>
              </div>

              <div *ngIf="validateForm.value.task_content_type === 2">
                <div class="goods-content-info">
                  <div class="goods-content-photo"><img
                    src="{{checkedInfo.activity_goods[0].goods.first_picture?aliyunOssOutputUrl+'/'+checkedInfo.activity_goods[0].goods.first_picture:''}}">
                  </div>
                  <div class="goods-content-name"><span class="activity-tips">{{checkedInfo.groupType}}</span>{{checkedInfo.name}}
                  </div>
                </div>
                <div class="goods-content-detail">
                  <div>
                    <nz-popover [nzTitle]="'活动商品'">
                      <span class="title">活动商品</span><a href="javascript:;" nz-popover><i
                      class="anticon anticon-file-text"></i> 查看商品</a>
                      <ng-template #nzTemplate>
                        <div class="tip-goods-item" *ngFor="let item of checkedInfo.activity_goods;let i = index;">
                          <span class="tip-goods-text" style="width: 70px;">活动商品{{i+1}}:</span>
                          <span class="tip-goods-text" style="width: 240px;">{{item.goods_name}}</span>
                          <span class="tip-goods-text" style="width: 80px;">售价<span class="tips-goods-price">￥{{item.activity_goods_sku[0].price/1000}}</span></span>
                        </div>
                      </ng-template>
                    </nz-popover>
                    <div><span class="title">活动有效期</span> 从{{checkedInfo.start_date}}至{{checkedInfo.end_date}}</div>
                  </div>
                  <div>
                    <div><span class="title">商品ID</span> {{checkedInfo.activity_goods[0].goods.id}}</div>
                  </div>
                  <div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>任务有效期</label>
          </div>
          <div>
            <span nz-form-control [nzValidateStatus]="getFormControl('validity_start')" class="date-pick-box">
              <nz-input [nzType]="'text'" formControlName="validity_start" [nzSize]="'large'"
                        [nzDisabled]="true"></nz-input>
            </span>
            <span nz-form-control [nzValidateStatus]="getFormControl('validity_end')" class="date-pick-box">
              <nz-input [nzType]="'text'" formControlName="validity_end" [nzSize]="'large'"
                        [nzDisabled]="true"></nz-input>
            </span>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>任务积分</label>
          </div>
          <div nz-form-control [nzValidateStatus]="getFormControl('point')" class="bx-form-item_content">
            <nz-input style="width: 155px;" [nzType]="'number'" formControlName="point" [nzDisabled]="true"
                      [nzSize]="'large'"></nz-input>
            <span class="prompt">所需推客等级Lv2</span>
            <div nz-form-explain *ngIf="getFormControl('point').dirty&&getFormControl('point').hasError('required')">
              请输入任务积分!
            </div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>任务完成上限</label>
          </div>
          <div nz-form-control [nzValidateStatus]="getFormControl('max_completion_times')" class="bx-form-item_content">
            <nz-input style="width: 155px;" [nzType]="'number'" formControlName="max_completion_times"
                      [nzDisabled]="true" [nzSize]="'large'"></nz-input>
            <span class="prompt">填0表示无上限</span>
            <div nz-form-explain
                 *ngIf="getFormControl('max_completion_times').dirty&&getFormControl('max_completion_times').hasError('required')">
              请输入任务完成上限!
            </div>
          </div>
          <div nz-form-item nz-row>
            <div nz-form-control class="bx-form-item_content" style="margin-top:20px;">
              <button [nzSize]="'large'" nz-button [nzType]="'default'" (click)="goList()">取消</button>
              <button [nzSize]="'large'" nz-button [nzType]="'primary'" (click)="edit()" *ngIf="canEdit"
                      [nzLoading]="isEditing">{{ isEditing ? '修改中': '修改' }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

<!-- 添加商品弹窗 start -->

<nz-modal
  [nzVisible]="goodsModalVisible"
  [nzTitle]="'添加商品或活动'"
  [nzWidth]="'700px'"
  [nzContent]="modalContent"
  (nzOnCancel)="goodsModalVisible = false;">
  <ng-template #modalContent>
    <div class="operate-line clearfix">
      <nz-radio-group [(ngModel)]="pickType" class="fl">
        <label nz-radio-button [nzValue]="'goods'">
          <span>添加商品</span>
        </label>
        <label nz-radio-button [nzValue]="'activity'">
          <span>添加活动</span>
        </label>
      </nz-radio-group>

      <nz-input
        style="width: 200px;float: right;"
        [nzType]="'search'"
        [nzPlaceHolder]="'输入任务名称'"
      ></nz-input>
    </div>
    <nz-table #nzTable *ngIf="pickType === 'goods'">
      <thead nz-thead>
      <tr>
        <th nz-th nzCheckbox></th>
        <th nz-th><span>商品图片</span></th>
        <th nz-th><span>商品名称</span></th>
        <th nz-th><span>商品ID</span></th>
        <th nz-th><span>商品价格</span></th>
        <th nz-th><span>商品库存</span></th>
      </tr>
      </thead>
      <tbody nz-tbody>
      <tr nz-tbody-tr *ngFor="let item of data">
        <td nz-td nzCheckbox>
          <label nz-checkbox (ngModelChange)="_refreshStatus($event)" [nzDisabled]="item.disabled"
                 [(ngModel)]="item.checked">
          </label>
        </td>
        <td nz-td><img src="../../../../assets/images/banner1.jpg" alt=""></td>
        <td nz-td style="width: 200px">巧妈妈澳大利亚精品500克果冻转发朋友圈1个曝光1块钱1个购买10块钱发展一个下线100块钱</td>
        <td nz-td>2013012301</td>
        <td nz-td>￥39</td>
        <td nz-td>200000</td>
      </tr>
      </tbody>
    </nz-table>
    <nz-table #nzTable *ngIf="pickType === 'activity'">
      <thead nz-thead>
      <tr>
        <th nz-th nzCheckbox></th>
        <th nz-th><span>商品图片</span></th>
        <th nz-th><span>活动名称</span></th>
        <th nz-th><span>活动有效期</span></th>
        <th nz-th><span>活动ID</span></th>
        <th nz-th><span>活动商品</span></th>
      </tr>
      </thead>
      <tbody nz-tbody>
      <tr nz-tbody-tr *ngFor="let item of data;let i = index;">
        <td nz-td nzCheckbox>
          <label nz-checkbox (ngModelChange)="_refreshStatus($event)" [nzDisabled]="item.disabled"
                 [(ngModel)]="item.checked">
          </label>
        </td>
        <td nz-td><img src="../../../../assets/images/banner1.jpg" alt=""></td>
        <td nz-td style="width: 200px"><span class="activity-tips">拼团</span>巧妈妈澳大利亚精品500克果冻转发朋友圈1个曝光1块钱1个购买10块钱发展一个下线100块钱
        </td>
        <td nz-td>2017.11.11-2017.12.24</td>
        <td nz-td>￥39</td>
        <td nz-td>
          <nz-popover [nzTitle]="'活动商品'">
            <a href="javascript:;" nz-popover>查看商品</a>
            <ng-template #nzTemplate>
              <div class="tip-goods-item">
                <span class="tip-goods-text" style="width: 70px;">活动商品1:</span>
                <span class="tip-goods-text" style="width: 240px;">巧妈妈澳大利亚精品500克果冻转发朋友圈1个曝光1块钱1个购买10块钱发展一个下线100</span>
                <span class="tip-goods-text" style="width: 80px;">售价<span class="tips-goods-price">￥39</span></span>
              </div>
              <div class="tip-goods-item">
                <span class="tip-goods-text" style="width: 70px;">活动商品1:</span>
                <span class="tip-goods-text" style="width: 240px;">巧妈妈澳大利亚精品500克果冻转发朋友圈1个曝光1块钱1个购买10块钱发展一个下线100</span>
                <span class="tip-goods-text" style="width: 80px;">售价<span class="tips-goods-price">￥39</span></span>
              </div>
            </ng-template>
          </nz-popover>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </ng-template>
</nz-modal>

<!-- 添加商品弹窗 end -->
